<template>
  <Drawer
    placement="right"
    :closable="true"
    v-model="visible"
    width="400"
    scrollable
    @on-close="cancel"
  >
    <template #header>
      <div class="flex flex-col justify-between">
        <div class="flex items-center mb-4 gap-x-2">
          <img src="~@/assets/images/icon_discussion.jpeg" class="w-6 h-6" alt="Start icon" />
          <div class="flex flex-col gap-y-1">
            <p class="text-lg font-semibold text-black">{{ title }}</p>
          </div>
        </div>
        <div class="text-sm text-gray-500">
          {{ desc }}
        </div>
      </div>
    </template>

    <template v-if="form[formKeys.inputKey]">
      <CommonCollapse title="输入" tip="输入需要添加到提示词的信息，这些信息可以被下方的提示词引用">
        <template v-if="addInputBtn" #right>
          <Button
            type="primary"
            size="small"
            icon="md-add"
            @click="addInput(formKeys.inputKey)"
          ></Button>
        </template>

        <div class="panel-table">
          <div class="panel-table-header">
            <div class="name" style="width: 150px">变量名</div>
            <div class="name">变量值</div>
          </div>
          <div class="panel-table-list">
            <Form ref="formEl" v-if="form" :model="form" label-position="top">
              <div
                class="flex items-center mb-4"
                v-for="(item, index) in form[formKeys.inputKey]"
                :key="index"
              >
                <div class="panel-table-item" style="width: 160px">
                  <FormItem
                    :key="index"
                    :prop="formKeys.inputKey + '.' + index + '.varname'"
                    :rules="{
                      required: true,
                      message: '变量名不可为空',
                      trigger: 'blur'
                    }"
                  >
                    <Input
                      v-model="item.varname"
                      :readonly="!addInputBtn"
                      placeholder="输入引用参考值"
                      size="small"
                    />
                  </FormItem>
                </div>
                <div class="panel-table-item" style="width: 100px; margin-right: 0">
                  <FormItem>
                    <Select size="small" :disabled="!addInputBtn" v-model="item.vartype">
                      <Option
                        v-for="group in BE_TYPE_LIST"
                        :value="group.value"
                        :key="group.value"
                        >{{ group.label }}</Option
                      >
                    </Select>
                  </FormItem>
                </div>
                <div class="panel-table-item" style="width: 180px">
                  <FormItem
                    :prop="formKeys.inputKey + '.' + index + '.varparam'"
                    :rules="{
                      required: true,
                      message: '变量值不可为空',
                      trigger: 'blur'
                    }"
                  >
                    <Input
                      size="small"
                      v-model="item.varparam"
                      check-strictly
                      placeholder="输入或引用参考值"
                    >
                    </Input>
                  </FormItem>
                </div>
              </div>
            </Form>
          </div>
        </div>
      </CommonCollapse>
      <Divider></Divider>
    </template>

    <CommonCollapse title="输出" tip="大模型运行完成后生成的内容">
      <el-tree default-expand-all :data="form[formKeys.ouputKey]">
        <template #default="{ node, data }">
          <div class="panel-table">
            <div class="flex items-center">
              <span class="text-sm">{{ data.varname }}</span>

              <div class="text-bg-normal">{{ data.vartype }}</div>
            </div>
          </div>
        </template>
      </el-tree>
    </CommonCollapse>
  </Drawer>
  <Modal v-model="showModal" title="代码" fullscreen footer-hide>
    <div class="w-full! max-w-full! h-full">
      <MonacoEditor v-model="code" footer-hide />
    </div>
  </Modal>
</template>
<script setup>
import { ref } from 'vue'
import CommonCollapse from '@/components/CommonCollapse/index.vue'

import { BE_TYPE_LIST } from '../../lib/constant'

const props = defineProps({
  formKeys: {
    type: Object,
    default: () => {
      return {}
    }
  },
  form: {
    type: Object,
    default: () => {}
  },
  title: {
    type: String,
    default: '输出'
  },
  desc: String,
  addInputBtn: Boolean
})

const emit = defineEmits(['add', 'remove', 'cancel'])

const visible = ref(false)
const showModal = ref(false)

// 组件的增删
const addInput = (listKey) => {
  emit('add', listKey)
}
const removeInput = (listKey, index) => {
  if (listKey == 'outputList' && index == 0) return
  emit('remove', listKey, index)
}
const init = () => {
  visible.value = true
}
const cancel = () => {
  visible.value = false
  emit('cancel')
}

defineExpose({
  init
})
</script>
<style lang="scss">
.panel-table-header {
  align-items: center;
  display: flex;
  gap: 4px;
  padding: 0 4px;

  .name {
    width: 120px;
    margin-right: 6px;
    box-sizing: content-box;
  }
  .center {
    text-align: center;
  }
}

:deep(.ivu-form-item-error-tip){
  font-size: 12px;
}
.panel-table-item {
  height: 30px;
  margin-right: 6px;
  &.center {
    text-align: center;
  }
  &.btn {
    cursor: pointer;
    font-size: 16px;
    font-weight: bold;
    margin-left: 12px;
    height: 22px;
  }
}

.el-tree-node__content {
  margin-top: 16px;
}
</style>
